<div class="marketing_slider">
  <div class="js-slider">
    <%= for story <- @stories do %>
      <div class="marketing_slider-item js-slider-item">
        <%= link to: "/sponsor/stories/" <> story.slug, class: "marketing_slider-item-inner", title: "View Story" do %>
          <img class="sponsor_story-header-logo" src='<%= url(~p"/images/content/sponsors/#{story.slug}") %>.png' srcset='<%= url(~p"/images/content/sponsors/#{story.slug}") %>.png 1x, <%= url(~p"/images/content/sponsors/#{story.slug}") %>@2x.png 2x' alt="<%= story.sponsor %> Logo" width="400">

          <blockquote class="sponsor_story-quote">
            <div class="sponsor_story-quote-body">
              <p>“<%= story.quote.content %>”</p>
            </div>
            <footer class="marketing_quote-footer">
              <img src='<%= url(~p"/images/content/sponsors/#{story.quote.image}") %>' alt="" width="50" height="50">
              <strong><%= story.quote.name %></strong>
              <span class="quote-title"><%= story.quote.title %></span>
            </footer>
          </blockquote>
        <% end %>
      </div>
    <% end %>
  </div>
  <div class="slider_pagination">
    <%= for {_story, index} <- Enum.with_index(@stories) do %>
      <button class="slider_pagination-item slider_pagination-item--<%= index %>" data-goto="<%= index %>"></button>
    <% end %>
  </div>
</div>

<div class="sponsor_grid">
  <%= for story <- @stories do %>
    <%= link to: "/sponsor/stories/#{story.slug}", class: "sponsor_grid-item", title: "View Story" do %>
      <img class="sponsor_grid-item-logo" src="<%= sponsor_avatar_url(story) %>" alt="<%= story.sponsor %> Logo" width="60">

      <div class="sponsor_grid-item-content">
        <h4><%= story.sponsor %></h4>
        <p><%= SharedHelpers.truncate(story.quote.content, 140) %></p>
      </div>
    <% end %>
  <% end %>
</div>

<footer class="marketing-section-footer">
  <p>Get in touch so we can help share your brand story with our developer community.</p>
  <div class="marketing-button_group" style="--max-width-group: 400px;">
    <%= link "Get in touch", to: ~p"/sponsor/pricing", class: "button_large" %>
    <%= link "How it works", to: "#how-it-works", class: "button_large" %>
  </div>
  <p class="button_note">Or call 888-974-CHLG (2454)</p>
</footer>
